
<template>
  <div class="bg">
    <div class="project-container">
      <div class="project_title">
        {{projectName}}
      </div>
      <div style="text-align-last: right;margin:10px">
        <el-link type="danger" :underline="false" @click="logout" class="el-icon-s-custom">退出登录</el-link>
      </div>
      <el-form ref="form" :inline="true" :model="queryParam" label-width="80px">
        <el-form-item label="工程名" class="font">
          <el-input v-model="queryParam.name" placeholder="请输入工程名" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="工程人员" class="font">
          <el-input v-model="queryParam.engineer" placeholder="请输入工程人员" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" style="float: right;" @click="queryList">查询</el-button>
          <el-button type="primary" style="float: right;margin-right:20px" @click="open=true" v-if="getLoginName !== 'admin'">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table
              :border="true"
              :data="tableData"
              style="width: 100%">
        <el-table-column
                prop="number"
                label="序号"
                type="index"
                width="80"
                align="center"
        />
        <el-table-column
                prop="name"
                label="工程名称">
        </el-table-column>
        <el-table-column
                prop="engineer"
                label="人员">
        </el-table-column>
        <el-table-column
                prop="amount"
                label="工程金额">
        </el-table-column>
        <el-table-column
                prop="startTime"
                label="开始时间">
        </el-table-column>
        <el-table-column
                prop="endTime"
                label="结束时间">
        </el-table-column>
        <el-table-column
                prop="approvalStatus"
                label="审核状态">
          <template slot-scope="scope">
            {{scope.row.approvalStatus === 1 ?'已审核':'待审核'}}
          </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="200px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toDelete(scope.row)" v-if="getLoginName !== 'admin'">删除</el-button>
            <el-button type="text" size="small" @click="toEdit(scope.row)" v-if="getLoginName !== 'admin'">编辑</el-button>
            <el-button type="text" size="small" v-if="scope.row.approvalStatus === 0 && getLoginName === 'admin'" @click="toApproval(scope.row)" >审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align-last: right;margin:10px">
        <el-button :underline="false" size="mini" type="warning" class="el-icon-reading" @click="jumpUser" v-if="getLoginName === 'admin'">去用户管理</el-button>
        <el-button :underline="false" size="mini" type="warning" class="el-icon-reading" @click="routeJump">去审批列表</el-button>
      </div>
      <el-dialog
              title="新增工程"
              :visible.sync="open"
              width="30%"
      >
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="工程名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="开工时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="完工时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.endTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="人员姓名">
            <el-input v-model="form.engineer"></el-input>
          </el-form-item>
          <el-form-item label="工程报价(元)">
            <el-input-number v-model="form.amount" :precision="2" :step="0.01" :controls="false"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button @click="open=false" >取消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import { list, edit, del, approval } from '@/api/project'
     import { getLoginName } from '@/utils/auth.js'
  export default {
    name: 'Project',
    data() {
      return {
       tableData:[],
       form:{},
       open:false,
       queryParam:{
         name:'',
         engineer:''
       },
       getLoginName:undefined
      }
    },
    created() {
      this.queryList()
      this.getLoginName = getLoginName()
    },
    methods: {
      queryList(){
        list(this.queryParam).then(res =>{
          this.tableData = res.data.data
        })
      },
      onSubmit(){
        edit(this.form).then(res =>{
          if(res.data.code === 200){
            this.open=false
            this.$message.success("操作成功!")
            this.queryList()
          }else{
            this.$message.error("操作失败,请刷新重试!")
          }
        })
      },
      toEdit(row){
        this.open=true
        this.form = Object.assign({},row)
      },
      toDelete(row){
        del(row).then(res =>{
          if(res.data.code === 200){
            this.$message.success("删除成功!")
            this.queryList()
          }else{
            this.$message.error("删除失败,请重试!")
          }
        })
      },
      toApproval(row){
        this.$confirm('请选择审批结果?', '提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '通过',
          cancelButtonText: '不通过',
          type: 'warning'
        }).then(() => {
          console.log("通过");
          row.approvalResult = 1
          approval(row).then(res =>{
            if(res.data.code === 200){
              this.$message.success("审核通过!")
              this.queryList()
            }else{
              this.$message.error("审核失败,请重试!")
            }
          })
        }).catch(action  => {
          console.log(this.$action)
          if(action === 'cancel') {
            console.log("不通过");
            row.approvalResult = 2
            approval(row).then(res =>{
              if(res.data.code === 200){
                this.$message.success("审核不通过!")
                this.queryList()
              }else{
                this.$message.error("审核失败,请重试!")
              }
            })
          }


        });
      },
      routeJump(){
        this.$router.push({path:'/approval'})
      },
      jumpUser(){
        this.$router.push({path:'/user'})
      },
      logout(){
        this.$router.push({path:'/login'})
      }
    }
  }
</script>
<style>
  .font .el-form-item__label{
    color: aliceblue;
  }
  .project-container {
    padding: 5% 10% 0 10%;
    width: 80%;
    height: 80%;
  }
  .bg{
    width: 100%;
    height: 100%;
    background-image: url("../assets/list-bg.jpg");
    background-size: cover;
  }
  .project_title{
    text-align-last: left;
    margin: 10px;
    color: chartreuse;
    font-size: 20px;
  }
</style>
